<html>
<head>
<style>
  body {
    margin: 0;
    color: yellow;
    font-family: Verdana;
    font-size: 12px;
  }

  a {
    color:white;
    margin: 0;
    padding: 0;
  }
  
  .spinner {
    margin: 0;
    padding: 0;
    border: 0;
    width:24px;
    height: 24px;
  }

  #version-span {
    position: absolute;
    left: 125px;
    top: 10px;
    height: 24px;
    vertical-align: middle;
  }

  #help-bar {
    position: absolute;
    left: 155px;
    top: 10px;
  }

  #help-bar a {
    color: #DDD;
  }

  #sign-bar {
    position:absolute;
    left: 155px;
    top: 20px;
  }

  #sign-bar a {
    font-size: 4px;
    color: #0066CC;
  }

  .status {
    text-align: left;
    height:50px;
  }
  
  .actionBar {
    text-align: center;
  }
  .actionBar input{
    margin:0;
    padding:0;
  }
  #infoButton {
    position:absolute;
    bottom: 18px;
    right: 12px;
  }
  #front {
    display:block;
    position: absolute;
    top: 28px;
    left: 18px;
    width: 180px;
  }
  #back {
    display:none;
    position: absolute;
    top: 15px;
    left: 18px;
    width: 190px;
  }
  #doneButton {
    position:absolute;
    bottom:0px;
    right:12px;
  }
</style>

<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleInfoButton.js' charset='utf-8'/>
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleAnimator.js' charset='utf-8'/>
<script type='text/javascript' src='/System/Library/WidgetResources/AppleClasses/AppleButton.js' charset='utf-8'/>

<script type='text/javascript' src='lib/prototype.js' charset='utf-8'/>
<script type='text/javascript' src='lib/builder.js' charset='utf-8'/>
<script type='text/javascript' src='core/update.js' charset='utf-8'/>
<script type='text/javascript' src='core/observers.js' charset='utf-8'/>
<script type='text/javascript' src='growl/growl.js' charset='utf-8'/>
<script type='text/javascript' src='core/cc_monitor.js' charset='utf-8'/>
<script type='text/javascript' src='mac_main.js' charset='utf-8'/>

</head>
<body onload="init()">
  <img id='bg-img' src="Default.png" width="216px" height="116px"/>
  <img id='spinner-img' class='spinner' src="images/icon-spinner.gif " style="position: absolute; left: 1px;top:1px"/>

  <span id='version-span'></span>&nbsp;<div id='help-bar'><a href="http://code.google.com/p/ccmonitor/" target='_blank' onclick="openLink(this)" title="CC Monitor Home">Help?</a></div>
  <div id='sign-bar'><a href="http://code.google.com/p/ccmonitor/" target='_blank' onclick="openLink(this)" title="CC Monitor Home">LiXiao's pet:)</a></div>

  <div id="back">
    <label for="configuration_source">configuration uri:</label><br/>
    <input type='text' id='configuration_source' name='configuration_source' size='24' value=''>
    
    <label for="interval">interval(in seconds):</label><br/>
    <input type='text' id='interval' name='interval' value='60' size='5'>

    <div id="doneButton"></div>
  </div>

  <div id="front">
    <div id='status-bar' class='status'><a href="http://code.google.com/p/ccmonitor/" target='_blank' onclick="openLink(this)" title="CC Monitor Home">CC Monitor</a></div>
    <div class='actionBar'>
      <input type='button' id='stop-button' value='stop' onclick="stopMonitors()"/>
      <input type='button' id='start-button' value='start' onclick="restartMonitors()"/>
      <input type='button' value='reboot' onclick="reboot()"/>
    </div>
    <div id='infoButton'></div>
  </div>

  <script type='text/javascript' src='test/fixtures.js' charset='utf-8'/>
</body>

</html>